<template>
	<div class="cart-box">
		<!-- 头部 -->
		<TopTab :topTabTitle="topTabTitle"></TopTab>
		<!-- 空购物车提示 -->
		<div class="cart-null" v-show="cartList.length == 0">购物车为空，没有产品</div>
		<!-- 购物车列表 -->
		<ul class="content">
			<li v-for="goods in cartList" :key="goods.id">
				<router-link :to="'/detail?goodsId='+goods.id">
					<img class="li-img" :src="goods.imgPath" alt="fff" />
				</router-link>
				<div class="cont">
					<p class="cont-title">{{ goods.name }}</p>
					<p class="price">￥{{ goods.price }}</p>
					<!-- 数量 -->
					<div class="num-box">
						<span class="num-box-span"><Subtract :num="goods.num" :goodsId="goods.id" @clickHandle="numSub"></Subtract></span>
						<input type="text" :value="goods.num" />
						<span><AddInto :num="goods.num" :goodsId="goods.id" @clickHandle="numAdd"></AddInto></span>
					</div>
				</div>
				<div class="right"><img @click="cartRemove(goods.id)" src="http://i.huasongwang.com/i/c/del-icon.png" alt="" /></div>
			</li>
		</ul>
		<!-- 数量过小提示 -->
		<div v-show="showNumTipt" class="numTipt" :style="{ opacity: transparent }">该商品最低购买量为：1件</div>
		<!-- 底部 -->
		<div class="footer">
			<p>
				合计：
				<span>￥{{ totalPrice == 0 ? '0.00' : totalPrice.toFixed(2) }}</span>
			</p>
			<button @click="settlement(totalPrice)">{{ totalPrice == 0 ? '再逛逛' : '去结算' }}</button>
		</div>
	</div>
</template>

<script>
import TopTab from '@/components/topTab.vue';
import AddInto from '@/components/addInto.vue'; //数量加
import Subtract from '@/components/subtract.vue'; //数量减
export default {
	name: 'cart',
	data() {
		return {
			screenWidth: '',
			topTabTitle: '购物车',
			cartList: this.$store.state.cartList,
			transparent: 1,
			num: 1,
			showNumTipt: false
		};
	},
	methods: {
		/* 结算 */
		settlement(param) {
			if (param == 0) {
				this.$router.push('/home');
			} else {
				this.$router.push("/order")
			}
		},
		/* 删除 */
		cartRemove(id) {
			this.$store.dispatch("setCartListAsync",{
				action:"DEL",
				id:id
			})
			
			/* 更新页面数据 */
			// this.cartList.forEach((item, index) => {
			// 	if (id == item.id) {
			// 		this.cartList.splice(index, 1);
			// 	}
			// });
		},
		/* 数量减 */
		numSub(res) {
			if (res.result < 1) {
				this.showNumTipt = true;
				clearInterval(this.auto);
				this.auto = setInterval(() => {
					this.transparent -= 0.05;
					if (this.transparent <= 0.1) {
						this.showNumTipt = false;
						this.transparent = 1;
						clearInterval(this.auto);
					}
				}, 100);
			} else {
				this.cartList.forEach(item => {
					if (res.goodsId == item.id) {
						item.num = res.result;
						this.dataUp(item);
					}
				});
			}
		},
		/* 数量加 */
		numAdd(res) {
			this.cartList.forEach(item => {
				if (res.goodsId == item.id) {
					item.num = res.result;
					this.dataUp(item);
				}
			});
			
		},

		dataUp(goods) {
			this.$store.dispatch("setCartListAsync",{
				action:"UP",
				goods:goods
			})
		}
	},
	mounted() {
		document.querySelector('.cart-box').style.height = document.documentElement.clientHeight + 'px';
	},
	created() {
	},
	computed: {
		/* 总价 */
		totalPrice() {
			return this.cartList.reduce((temp, item) => {
				return temp + item.price * item.num;
			}, 0);
		}
	},
	components: { TopTab, AddInto, Subtract }
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.cart-box {
	width: 100%;
	background-color: #f5f5f5;
	/* height: 13rem; */
}

/* 空提示 */
.cart-null {
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 3rem;
	font-size: 0.38rem;
	color: #666666;
}

/* 内容 */
.content {
	width: 100%;
	background-color: white;
	padding: 0;
}
.content li {
	width: 100%;
	height: 2.5rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-right: 0.1rem;
	border-bottom: 0.01rem solid #ddd;
}
.li-img {
	width: 2.16rem;
	height: 2.16rem;
}

/* 中间 */
.cont {
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 0.25rem;
	padding-bottom: 0.4rem;
}
.cont-title {
	padding-left: 0.1rem;
	font-size: 0.35rem;
	color: #666666;
}

.price {
	font-size: 0.3rem;
	color: #f42424;
}
/* 数量 */
.num-box {
	width: 100%;
	display: flex;
	align-items: center;
}

.num-box p {
	padding: 0.15rem 0;
}

.num-box span {
	width: 0.56rem;
	height: 0.56rem;
	border: 0.01rem solid #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
}

.num-box-span {
	border-radius: 0.1rem 0 0 0.1rem;
}

.num-box input {
	width: 1rem;
	height: 0.52rem;
	border: 0.01rem solid #ddd;
	text-align: center;
}

.num-box span:last-child {
	border-radius: 0 0.1rem 0.1rem 0;
}
/* 删除 */
.right {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.55rem 0;
}
.right img {
	width: 0.5rem;
	height: 0.5rem;
}
/* 数量最小提示 */
.numTipt {
	position: fixed;
	top: 50%;
	left: 20%;
	z-index: 6;
	width: 4.78rem;
	height: 0.92rem;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.3rem;
	color: white;
}



/* 底部 */
.footer {
	width: 100%;
	height: 1.04rem;
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
}
.footer p {
	padding-left: 0.1rem;
	color: #ff2a43;
	font-size: 0.3rem;
}
.footer p span {
	font-size: 0.34rem;
}
.footer button {
	width: 3.22rem;
	height: 100%;
	background-color: #f42424;
	color: white;
	font-size: 0.32rem;
	border: none;
	font-weight: bold;
}
</style>
